<template>
  <el-row :gutter="15">
    <!-- 网站运营天数 -->
    <el-col :span="8">
      <div class="dashboard-item">
        <h3 style="color: #4682b4">友友学社已运营</h3>
        <el-statistic :value="operationDays" suffix="天" style="color: #6ca6cd" />
      </div>
    </el-col>

    <!-- 现有空间数量 -->
    <el-col :span="8">
      <div class="dashboard-item">
        <h3 style="color: #cd5c5c">现有空间</h3>
        <el-statistic :value="currentSpaces" suffix="个" style="color: #f08080" />
      </div>
    </el-col>

    <!-- 共有空间数量 -->
    <el-col :span="8">
      <div class="dashboard-item">
        <h3 style="color: #556b2f">共有空间</h3>
        <el-statistic :value="totalSpaces" suffix="个" style="color: #6b8e23" />
      </div>
    </el-col>

    <!-- 热门空间数量 -->
    <el-col :span="8">
      <div class="dashboard-item">
        <h3 style="color: #daa520">热门空间有</h3>
        <el-statistic :value="hotSpaces" suffix="个" style="color: #ffd700" />
      </div>
    </el-col>

    <!-- 用户支持数量 -->
    <el-col :span="8">
      <div class="dashboard-item">
        <h3 style="color: #8b4513">感谢现有用户的支持</h3>
        <el-statistic :value="totalUsers" suffix="位" style="color: #a0522d" />
      </div>
    </el-col>

    <!-- 链接部分：了解我们 -->
    <el-col :span="8">
      <div class="dashboard-item link-item">
        <a href="https://example.com" class="link-text" target="_blank">了解我们</a>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      operationDays: 365, // 模拟运营天数
      currentSpaces: 42, // 模拟现有空间数量
      totalSpaces: 100, // 模拟共有空间数量
      hotSpaces: 10, // 模拟热门空间数量
      totalUsers: 500 // 模拟用户总数
    }
  }
}
</script>

<style scoped>
.dashboard-item {
  text-align: center;
  padding: 10px; /* 缩小内边距使其更紧凑 */
}

.dashboard-item h3 {
  font-size: 14px; /* 缩小标题字体 */
  margin-bottom: 6px; /* 缩小标题与数字之间的距离 */
  font-weight: bold;
  color: #333;
}

.el-statistic__content {
  font-size: 22px; /* 缩小数字字体 */
  font-weight: bold;
}

/* 链接样式 */
.link-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-text {
  font-size: 16px; /* 调整链接字体 */
  color: #4682b4;
  text-decoration: none;
}

.link-text:hover {
  color: #6ca6cd;
  text-decoration: underline;
}
</style>
